import React, { useState } from 'react';
import { Card, List, Tag, Switch, Button, Space, Modal, Badge, Tooltip, Empty, Spin, Input } from 'antd';
import { DownloadOutlined, UploadOutlined, ReloadOutlined, AppstoreAddOutlined, InfoCircleOutlined, SettingOutlined } from '@ant-design/icons';

const { Search } = Input;

// 定义插件接口
export interface Plugin {
  id: string;
  name: string;
  version: string;
  description: string;
  author: string;
  enabled: boolean;
  type: string;
  tags: string[];
  icon?: string;
  configurable: boolean;
  installDate: string;
  updateDate?: string;
}

// 创建一个简化的插件存储
const usePluginStore = () => {
  const [plugins, setPlugins] = useState<Plugin[]>([
    {
      id: 'pdf-extractor',
      name: 'PDF文本提取器',
      version: '1.2.0',
      description: '高级PDF文本和表格提取工具，支持多种格式和布局。',
      author: '知识工具团队',
      enabled: true,
      type: '文档处理',
      tags: ['PDF', '提取', '文本'],
      configurable: true,
      installDate: '2023-05-10',
      updateDate: '2023-09-20',
    },
    {
      id: 'semantic-search',
      name: '语义搜索增强',
      version: '0.9.5',
      description: '使用高级语义模型增强系统搜索能力，提供更精准的结果。',
      author: 'AI搜索实验室',
      enabled: true,
      type: '搜索增强',
      tags: ['搜索', '语义', 'AI'],
      configurable: true,
      installDate: '2023-07-15',
    },
    {
      id: 'knowledge-graph',
      name: '知识图谱生成器',
      version: '1.0.0',
      description: '从文档中自动生成知识图谱，显示概念间关系。',
      author: '图谱技术公司',
      enabled: false,
      type: '知识管理',
      tags: ['图谱', '关系', '可视化'],
      configurable: true,
      installDate: '2023-08-01',
    },
  ]);
  
  const togglePlugin = (id: string) => {
    setPlugins(prev => prev.map(plugin => 
      plugin.id === id ? { ...plugin, enabled: !plugin.enabled } : plugin
    ));
  };
  
  return {
    plugins,
    togglePlugin,
  };
};

interface PluginItemProps {
  plugin: Plugin;
  onToggle: (id: string) => void;
  onSettings: (plugin: Plugin) => void;
  onViewDetails: (plugin: Plugin) => void;
}

const PluginItem: React.FC<PluginItemProps> = ({ plugin, onToggle, onSettings, onViewDetails }) => {
  return (
    <List.Item
      actions={[
        <Switch 
          key="toggle" 
          checked={plugin.enabled} 
          onChange={() => onToggle(plugin.id)} 
        />,
        <Button 
          key="settings" 
          icon={<SettingOutlined />} 
          disabled={!plugin.configurable}
          onClick={() => onSettings(plugin)}
        />,
        <Button 
          key="details" 
          icon={<InfoCircleOutlined />} 
          onClick={() => onViewDetails(plugin)}
        />,
      ]}
    >
      <List.Item.Meta
        title={
          <Space>
            {plugin.name}
            <Tag color="blue">{plugin.version}</Tag>
            {plugin.updateDate && (
              <Badge dot>
                <Tag color="green">最近更新</Tag>
              </Badge>
            )}
          </Space>
        }
        description={
          <div>
            <div>{plugin.description}</div>
            <div style={{ marginTop: 8 }}>
              <Tag color="purple">{plugin.type}</Tag>
              {plugin.tags.map(tag => (
                <Tag key={tag}>{tag}</Tag>
              ))}
            </div>
          </div>
        }
      />
    </List.Item>
  );
};

const PluginManager: React.FC = () => {
  const { plugins, togglePlugin } = usePluginStore();
  const [searchText, setSearchText] = useState('');
  const [viewDetailsPlugin, setViewDetailsPlugin] = useState<Plugin | null>(null);
  const [settingsPlugin, setSettingsPlugin] = useState<Plugin | null>(null);
  
  // 筛选插件
  const filteredPlugins = plugins.filter(plugin => 
    plugin.name.toLowerCase().includes(searchText.toLowerCase()) ||
    plugin.description.toLowerCase().includes(searchText.toLowerCase()) ||
    plugin.type.toLowerCase().includes(searchText.toLowerCase())
  );
  
  // 处理激活插件
  const handleTogglePlugin = (id: string) => {
    togglePlugin(id);
  };
  
  // 处理查看详情
  const handleViewDetails = (plugin: Plugin) => {
    setViewDetailsPlugin(plugin);
  };
  
  // 处理打开设置
  const handleOpenSettings = (plugin: Plugin) => {
    setSettingsPlugin(plugin);
  };
  
  return (
    <Card
      title="插件管理"
      extra={
        <Space>
          <Button icon={<ReloadOutlined />}>刷新</Button>
          <Button icon={<UploadOutlined />}>安装插件</Button>
          <Button type="primary" icon={<AppstoreAddOutlined />}>插件市场</Button>
        </Space>
      }
    >
      <div style={{ marginBottom: 16 }}>
        <Search
          placeholder="搜索插件"
          value={searchText}
          onChange={e => setSearchText(e.target.value)}
          style={{ width: 300 }}
        />
      </div>
      
      <List
        itemLayout="vertical"
        dataSource={filteredPlugins}
        renderItem={plugin => (
          <PluginItem
            plugin={plugin}
            onToggle={handleTogglePlugin}
            onSettings={handleOpenSettings}
            onViewDetails={handleViewDetails}
          />
        )}
        locale={{
          emptyText: <Empty description="暂无插件" />
        }}
      />
      
      {/* 插件详情模态框 */}
      <Modal
        title="插件详情"
        open={!!viewDetailsPlugin}
        footer={null}
        onCancel={() => setViewDetailsPlugin(null)}
      >
        {viewDetailsPlugin && (
          <div>
            <h3>{viewDetailsPlugin.name}</h3>
            <p><strong>版本:</strong> {viewDetailsPlugin.version}</p>
            <p><strong>作者:</strong> {viewDetailsPlugin.author}</p>
            <p><strong>安装日期:</strong> {viewDetailsPlugin.installDate}</p>
            {viewDetailsPlugin.updateDate && (
              <p><strong>更新日期:</strong> {viewDetailsPlugin.updateDate}</p>
            )}
            <p><strong>描述:</strong> {viewDetailsPlugin.description}</p>
            <div>
              <strong>标签:</strong>
              <div style={{ marginTop: 8 }}>
                <Tag color="purple">{viewDetailsPlugin.type}</Tag>
                {viewDetailsPlugin.tags.map(tag => (
                  <Tag key={tag}>{tag}</Tag>
                ))}
              </div>
            </div>
          </div>
        )}
      </Modal>
      
      {/* 插件设置模态框 */}
      <Modal
        title={`插件设置 - ${settingsPlugin?.name}`}
        open={!!settingsPlugin}
        onOk={() => setSettingsPlugin(null)}
        onCancel={() => setSettingsPlugin(null)}
      >
        {settingsPlugin && (
          <div>
            <p>此处应包含插件的具体设置选项</p>
          </div>
        )}
      </Modal>
    </Card>
  );
};

export default PluginManager; 